﻿<div>

<h2>JavaScript 代码：</h2>
<textarea name="dp-syntaxhighlighter" class="brush: js; highlight: [6]" >
    
    $(function () {
        $("#tree").tree({
            method: "get",
            lines: true,
            url: "tree/tree-data-simple.json",
            dataPlain: true,       //该属性用以启用当前 easyui-tree 控件对平滑数据格式的支持
            toggleOnClick: false,
            checkbox: true,
            enableContextMenu: false
        });
    });

</textarea>
<h2>HTML 代码：</h2>
<textarea name="dp-syntaxhighlighter" class="brush: html; highlight: []" >
    
    <ul id="tree"></ul>

</textarea>
<h2>数据源文件 tree-data-simple.json 内容：</h2>
<textarea name="dp-syntaxhighlighter" class="brush: js; highlight: []" >
    
    [
        { "id": 1, "text": "根节点1", "state": "open", "checked": true },
        { "id": 11, "text": "子节点11", "pid": 1 },
        { "id": 12, "text": "子节点12", "pid": 1 },
        { "id": 13, "text": "子节点13", "pid": 1 },
        { "id": 14, "text": "子节点14", "pid": 1 },

        { "id": 2, "text": "根节点2", "state": "closed" },
        { "id": 21, "text": "子节点21", "pid": 2 },
        { "id": 211, "text": "子节点211", "pid": 21 },
        { "id": 212, "text": "子节点212", "pid": 21 },
        { "id": 213, "text": "子节点213", "pid": 21 },
        { "id": 214, "text": "子节点214", "pid": 21 },
        { "id": 215, "text": "子节点215", "pid": 21 },
        { "id": 22, "text": "子节点22", "pid": 2 },
        { "id": 23, "text": "子节点23", "state": "closed", "pid": 2 },
        { "id": 231, "text": "子节点231", "pid": 23 },
        { "id": 232, "text": "子节点232", "pid": 23 },
        { "id": 233, "text": "子节点233", "pid": 23 },
        { "id": 234, "text": "子节点234", "pid": 23 },
        { "id": 235, "text": "子节点235", "pid": 23 },
        { "id": 24, "text": "子节点24", "pid": 2 },

        { "id": 3, "text": "根节点3" },
        { "id": 4, "text": "根节点4", "state": "open" },
        { "id": 41, "text": "子节点41", "pid": 4, "checked": true },
        { "id": 42, "text": "子节点42", "pid": 4 },
        { "id": 43, "text": "子节点43", "pid": 4 },
        { "id": 44, "text": "子节点44", "pid": 4 },
        { "id": 5, "text": "根节点5", "state": "closed" },
        { "id": 51, "text": "子节点51", "pid": 5 },
        { "id": 52, "text": "子节点52", "pid": 5 },
        { "id": 53, "text": "子节点53", "pid": 5 },
        { "id": 54, "text": "子节点54", "pid": 5 },
        { "id": 6, "text": "根节点6" }
    ]

</textarea>


</div>